<template>
  <div>
    <input type="text" placeholder="搜索内容" v-if="showIpt" v-focus />
    <button @click="handkle">点击搜索</button>
    <hr />
    <div>
      自定义颜色<input type="text" v-model.trim.lazy="rgb" />
      <h1 v-color="rgb">白帝圣剑</h1>
      <h1 v-color1>御剑跟着我</h1>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showIpt: false,
      rgb: 'blue',
    }
  },
  directives: {
    focus: {
      inserted(value) {
        value.focus()
      },
    },
  },
  methods: {
    handkle() {
      this.showIpt = true
    },
  },
}
</script>

<style></style>
